<template>
  <div class="hello">
    <z-tag
      success="1"
      info="2"
      warning="3, 6"
      danger="4"
      primary="5"
      :value="value"
    >未结账</z-tag>

    <z-excel
      :data="ex"
      :header="header"
    ></z-excel>
  </div>
</template>

<script>
  import ZTag from '../components/Tag'
  import ZExcel from '../components/Excel'
  export default {
    name: 'HelloWorld',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App',
        value: 6,
        ex: [
          { name: '曾小晨', age: 18, tel: "15096319112", type: 2, time: 1535762335485 },
          { name: '卢本伟', age: 102, tel: "346764313", type: 1 }
        ],
        header: [
          { label: '姓名', value: 'name' },
          { label: '时间', value: 'time', type: 'date', format: 'yyyy-MM-dd' },
          { label: '年龄', value: 'age' },
          { label: '电话', value: 'tel' , hidden: true},
          { label: '类型', value: 'type', type: 'status', options: [{ label: '成年人', value: 1 }, { label: '未成年人', value: 2 }] }
        ]
      }
    },
    components: {
      ZTag,
      ZExcel
    },
    methods: {
      click() {
        this.value = 5
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }
</style>
